<template>
<div class="container">
    <!-- 模块是左右分割的 -->
    <div class="leftTwo">
        <!-- 每日秒杀 -->
        <router-link to="/everydayBuy" tag="div">
            <activity-everyday-buy></activity-everyday-buy>
        </router-link>
        <!-- 嗨拼团 -->
        <router-link to="/GoodsAssemble" tag="div">
            <activity-happy-group></activity-happy-group>
        </router-link>

    </div>
    <div class="rightTwo">
        <!-- 有好货 -->
        <router-link to="/hasGoodGoods" tag="div">
            <activity-has-good-goods></activity-has-good-goods>
        </router-link>
        <!-- 0元试用 -->
        <router-link tag="div" to="/freeUse">
            <activity-free-use></activity-free-use>
        </router-link>

    </div>
</div>
</template>

<script>
// 每日秒杀
import ActivityEverydayBuy from './compontents/everydayBuy'
// 嗨拼团
import ActivityHappyGroup from './compontents/hasGoodGoods'
// 0元试用
import ActivityFreeUse from './compontents/freeUse'
// 有好货
import ActivityHasGoodGoods from './compontents/happyGroup'
export default {
    name: 'Activity',
    components: {
        ActivityEverydayBuy,
        ActivityHappyGroup,
        ActivityFreeUse,
        ActivityHasGoodGoods,
    },
    data() {
        return {
            // // 每日秒杀
            // EverydayBuy:"每日秒杀",
            // // 有好货
            // HasGoodGoods:"有好货",
            // // 嗨拼团
            // HappyGroup:"嗨拼团",
            // // 0元试用
            // FreeUse:"0元试用"
        }
    }
}
</script>

<style scoped>
.container {
    display: flex;
    display: -webkit-flex;
    align-content: center;
}

.container>div {
    margin-top: .2rem;
}

.leftTwo {
    width: 100%;
    border-right: 1px solid #ccc;
}

.rightTwo {
    width: 100%;
}

.leftTwo>* {
    width: 50;
    padding: .1rem;
}

.leftTwo>*>* {
    width: 100%;
}

.rightTwo>* {
    width: 50;
    padding: .1rem;
}

.rightTwo>*>* {
    width: 100%;
}
</style>
